<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<view class="top">
			<view class="top_searchInput">
				<u-search
					placeholder="点击搜索商品"
					:focus="true"
					v-model="words"
					:showAction="false"
				></u-search>
			</view>
			<text class="top_search" @click="getSearchKeyWords">搜索</text>
		</view>
		<view class="hot">
			<text class="hot_search">热门搜索</text>
			<view>
				<text
					v-for="(item, index) in keyWords"
					:key="index"
					class="hot_words"
					@click="historySearch(item.title)"
				>
					{{ item.title }}
				</text>
			</view>
		</view>
		<view class="search_result">
			<!-- 暂无数据 -->
			<view class="nomsg" v-if="!searchReult.length && show">
				<u-empty
					mode="search"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				></u-empty>
			</view>
			<view
				v-for="(item, index) in searchReult"
				:key="index"
				class="hot_goods_content"
				v-if="searchReult.length"
				style="cursor: pointer;"
				@click="toDetails(item.id)"
			>
				<view class="left">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="right">
					<text id="storeName0">{{ item.storeName }}</text>
					<text class="price">
						<text style="font-size: 12px;">￥</text>
						{{ item.price }}
					</text>
					<view class="bottom">
						<text>已售{{ item.sales }}{{ item.unitName }}</text>
						<u-icon
							class="icon"
							name="shopping-cart"
							color="#e93525"
							size="20"
						></u-icon>
					</view>
					<br />
				</view>
			</view>
			<text v-if="searchReult.length">🤗人家是有底线的~~</text>
		</view>
		<view class="hr" v-if="!searchReult.length">
			<view class="left">————</view>
			<view class="middle">
				<text class="middle_text">热门推荐</text>
			</view>
			<view class="right">————</view>
		</view>
		<view class="hot_goods" v-if="!searchReult.length">
			<view
				v-for="(item, index) in hotGoodsList"
				:key="index"
				class="hot_goods_content"
				@click="toDetails(item.id)"
				style="cursor: pointer;"
			>
				<image :src="item.image" mode=""></image>
				<text class="storeName">{{ item.storeName }}</text>
				<text class="price">￥{{ item.price }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import Nav from "@/components/top_nav.vue";
import {searchKeyWords, hotKeywords, hotRecommend} from "@/network/index.js";
export default {
	data() {
		return {
			words: "",
			searchReult: [],
			keyWords: [],
			hotGoodsList: [],
			show: false
		};
	},
	components: {
		Nav
	},
	methods: {
		toDetails(id) {
			uni.navigateTo({
				url: "../../subpackages/classify/ProductDetails?id=" + id
			});
		},
		historySearch(title) {
			this.words = title;
			this.getSearchKeyWords();
		},
		async getSearchKeyWords() {
			try {
				const res = await searchKeyWords(this.words);
				this.searchReult = res.data.list;
				this.show = true;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		async getHotKeywords() {
			try {
				const res = await hotKeywords();
				this.keyWords = res.data;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		async getHotRecommend() {
			try {
				const res = await hotRecommend();
				this.hotGoodsList = res.data.list;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		}
	},
	created() {
		this.getHotKeywords();
		this.getHotRecommend();
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f5f5f5;
	height: 100vh;
	.top {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90vw;
		height: 5vh;
		padding: 10px 0;
		background-color: #fff;
		.top_searchInput {
			width: 70vw;
			padding: 0 2vw;
			height: 2vh;
			display: flex;
			align-items: center;
		}
		.top_search {
			cursor: pointer;
			padding: 0px 5px 0px 15px;
		}
	}
	.search_result {
		display: flex;
		justify-content: center;
		width: 90vw;
		background-color: #fff;
		flex-wrap: wrap;
		.hot_goods_content {
			width: 90vw;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 20vh;
			.right {
				display: flex;
				flex-direction: column;
				width: 60vw;
				#storeName0 {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.price {
					margin: 20px 0 0 0;
					color: #e93323;
					font-weight: bolder;
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					text {
						color: #b2aabd;
						font-size: 12px;
					}
					.icon {
						padding: 3px;
						border: 1px solid red;
						border-radius: 50%;
					}
				}
			}
			image {
				width: 20vw;
				height: 15vh;
			}
		}
	}
	.hot {
		display: flex;
		flex-direction: column;
		width: 90vw;
		padding: 0 0 20px 0;
		font-size: 13px;
		color: #999999;
		border-bottom: 1px solid #eeeeee;
		background-color: #fff;
		.hot_search {
			margin: 10px 20px;
		}
		.hot_words {
			cursor: pointer;
			color: #000;
			border: 1px solid #aaa;
			margin: 0 5px;
			padding: 5px 8px;
			border-radius: 15px;
			font-size: 12px;
		}
		.hot_words:nth-of-type(1) {
			margin-left: 20px;
		}
	}
	.hr {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 10vh;
		background-color: #fff;
		width: 90vw;
		padding: 20px 0;
		.left,
		.right {
			margin: 0 20px;
			padding: 0 10px;
		}
		.left::after {
			content: "";
			display: inline-block;
			width: 5px;
			height: 5px;
			background-color: #000;
			transform: rotate(45deg) translateY(-5px) translateX(2px);
		}
		.right::before {
			content: "";
			display: inline-block;
			width: 5px;
			height: 5px;
			background-color: #000;
			transform: rotate(45deg) translateY(2px) translateX(-5px);
		}
	}
	.hot_goods {
		width: 90vw;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		background-color: #fff;
		.hot_goods_content {
			display: flex;
			flex-direction: column;
			width: 40vw;
			padding: 10px;
			image {
				width: 40vw;
				height: 40vw;
				border-radius: 10px;
			}
			.storeName {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.price {
				color: #e93323;
			}
		}
	}
}
</style>
